<template>
    <div class="header">
        <van-nav-bar 
            :title="Title"
            @click-left="onClickLeft"
            @click-right="onClickRight"
            fixed>
            <template #left >
                <van-icon :name="Type==1?'bars':'arrow-left'" size="24" color='#fff'/>
            </template>
            <template #right v-if='Type==1 || Type==4'>
                <van-icon name="search" size="24" color='#fff'/>
            </template>
            <template #right v-else-if='Type==3'>
                <van-icon name="wap-home-o" size="24" color='#fff'/>
            </template>
        </van-nav-bar>
    </div>
</template>
<script>
export default {
    name:'Header',
    props:{
        Title:{
            type:String,
            required:true,
            default:'快读'
        },
        Type:{
            type:Number,
            required:true,
            default:1
        }
    },
    data(){
        return{
            
        }
    },
    methods:{
        onClickLeft(){
            // console.log(this.Type)
            if(this.Type==1){
                this.$router.push({name:'Cate'})
            }else{
                this.$router.go(-1)
            }
        },
        onClickRight(){
            if(this.Type==3){
                this.$router.push({name:'Home'})
            }else if(this.Type==1){
                this.$router.push({name:'Search'})
            }else if(this.Type==4){
                this.$emit('beenclicked')
            }
        },
    }
}
</script>
<style scoped lang='stylus'>
.header
  height 1rem
.van-nav-bar 
  background-color #1989fa
  height 1rem
  >>> .van-nav-bar__left
    padding-left .1rem
  >>> .van-nav-bar__title
    font-size .36rem
    color #fff
  >>> .van-nav-bar__right
    padding-right .1rem
</style>